<template>
  <div class="applyHome">
    🩹🐻‍❄️🩲✨💌🕳️💣🛀🛌🧱🌡️🎊🎉🎈🧧💎🖨️⚙️💥🙊🐱🦊🐺🦄🐴🐽🐸🐊🐢🐍🐳🐡🦈🐛🌸🌳🌍🌐☀☁🌧️🌈🌊💧🩸👒👑👓🧳🧖🎅👰‍🤵‍👨‍🙋👵🧠🦷👂👀👅👄💪🤲
    <br>

    <div class="margin-top">
      <el-tag
          v-for="item in items"
          :key="item.label"
          :effect="item.effect"
          :color="item.color"
          :type="item.type"
          @click="openTab(item)">
        {{ item.label }}
      </el-tag>
    </div>

  </div>
</template>

<script>
export default {
  name: "applyHome",
  data() {
    return {
      items: [
        // type: success / info / warning / danger
        // effect: dark / light / plain
        {label: '修改内容前后变动日志', type: 'success', effect: 'dark', target: 'gitee'},
        {label: '重复读取 request 流数据', type: 'danger', effect: 'light', target: 'gitee'},
        {label: 'jenkins 常用 shell 命令', type: 'warning', effect: 'dark', target: 'gitee'},
        {label: 'SQL优化总结', type: 'success', effect: 'light', target: 'yuque', href: 'https://www.yuque.com/shiva/ypnk5i/lvsbpw'},
        {label: '拦截重复请求', type: 'info', effect: 'dark', target: 'gitee'},
        {label: '线上服务CPU跑满', type: 'danger', effect: 'dark', target: 'gitee'}
      ]
    }
  },
  methods: {
    openTab(item) {
      switch (item.target){
        case 'yuque':
          window.open(item.href, '_blank');
          break;
        default:
          window.open("https://gitee.com/qianwei4712/showns/blob/master/solutions/" + item.label + ".md", '_blank');
          break
      }
    }
  }
}
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}
.el-tag {
  margin-left: 10px;
  margin-bottom: 5px;
  cursor: pointer;
}
</style>
